<template>
  <div class="edit_mail">
    <div class="title">
      <breadCrumb @back="returnFun" :titleArr="titleArr"></breadCrumb>
    </div>
    <el-form ref="firmMailEdit" class="edit_mail_form" :model="firmMailEdit" label-width="150px" label-position="left">
      <el-form-item class="mail_name" prop="email" :label="$t('public.email') + ':'" >
        <el-input v-model.trim="firmMailEdit.email" :disabled="true" class="input_box"></el-input>
      </el-form-item>
      <el-form-item class="mail_name" prop="skillGroup" :label="$t('config.channel.accessSkillGroupName') + ':'" >
        <el-select size="mini" v-model="firmMailEdit.skillGroup" class="edit_li_input">
          <el-option
            v-for="item in peers"
            :label="item.DisplayName"
            :value="item.Exten">
            {{item.DisplayName}}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="mail_name" prop="sign" :label="$t('config.channel.emailSignature') + ':'" >
        <el-select size="mini" v-model="firmMailEdit.sign" class="edit_li_input">
          <el-option
            v-for="item in signs"
            :label="item.name"
            :value="item._id">
            {{item.name}}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.mailTip10')">
        <el-radio-group v-model.trim="firmMailEdit.seatSendEvaluation">
          <el-radio :label="true">{{$t('config.agent.open')}}</el-radio>
          <el-radio :label="false">{{$t('config.agent.close')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.mailTip11')">
        <el-radio-group v-model.trim="firmMailEdit.systemSendEvaluation">
          <el-radio :label="true">{{$t('config.agent.open')}}</el-radio>
          <el-radio :label="false">{{$t('config.agent.close')}}</el-radio>
        </el-radio-group>
        <p class="tip">{{$t('configLazyLoad.channel.mailTip21')}}</p>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.mailTip12')" style="text-align: left;">
        <el-radio-group v-model.trim="firmMailEdit.isOpen">
          <el-radio :label="true">{{$t('config.agent.open')}}</el-radio>
          <el-radio :label="false">{{$t('config.agent.close')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item  v-show="firmMailEdit.isOpen" :label="$t('config.channel.emaiTimeOutNotify') + ':  '" class="form_item_li mail_name">
        <el-row>
          <el-col :span="10">
            <el-input type="number"  v-model="firmMailEdit.num" @change="changeNum" :placeholder="$t('public.pleaseInput')"></el-input>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-select size="mini" v-model="firmMailEdit.unit" class="select">
              <el-option
                v-for="item in timeOptions"
                :label="item.label"
                :value="item.val">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2" :offset="1">
            <question-tooltip
              class="wechatTootip fl"
              :direction="'bottom'"
              :tipContent="$t('configLazyLoad.channel.mailTip13')">
            </question-tooltip>
          </el-col>
          <el-col :span="24">
            <p style="color: #737373;">{{$t('configLazyLoad.channel.mailTip14')}}</p>
          </el-col>
          <el-col :span="24">
            <p style="color: #262626;margin-top: 10px;">{{$t('configLazyLoad.channel.mailTip15')}}</p>
          </el-col>
          <el-col class="form_agent">
            <div class="follow-agent-wrap" v-show="folllowedAgents.length">
            <span class="follow-agent follow-common" v-for="item in folllowedAgents" :key="item._id">{{item.label}}
              <i class="el-icon-close" @click.stop="closeFollowedAgents(item._id)"></i>
            </span>
            </div>
            <el-popover
              ref="popover4"
              placement="bottom"
              @show="popoverShow"
              width="240"
              trigger="click">
              <agent-tree :readSeat="folllowedAgents" ref="agentTree" @saveFollowedAgents="saveFollowedAgents"></agent-tree>
            </el-popover>
            <span class="follow-agent-add follow-common fl"  v-popover:popover4><i class="el-icon-plus"></i> {{$t('public.add')}}</span>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item  v-show="firmMailEdit.isOpen" :label="$t('configLazyLoad.channel.mailTip16')" class="form_item_li mail_name">
        <el-row>
          <el-col :span="10">
            <el-input type="number" v-model="firmMailEdit.beforeNum" @change="changeNum" :placeholder="$t('public.pleaseInput')"></el-input>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-select size="mini" v-model="firmMailEdit.beforeUnit" class="select">
              <el-option
                v-for="item in timeOptions"
                :label="item.label"
                :value="item.val">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            <span style="color: #262626; margin-left: 5px;">{{$t('email.RemindAgents')}}</span>
          </el-col>
          <el-col :span="24">
            <p style="color: #737373;">
              {{$t('email.processTimeoutConfigDetial')}}
            </p>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item class="mail_name" :label="$t('configLazyLoad.channel.mailTip65')" style="text-align: left;">
        <el-radio-group v-model.trim="firmMailEdit.smtpSend">
          <el-radio :label="true">{{$t('config.agent.open')}}</el-radio>
          <el-radio :label="false">{{$t('config.agent.close')}}</el-radio>
          <p class="tip">{{$t('configLazyLoad.channel.mailTip68')}}</p>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="mail_name" v-show="firmMailEdit.smtpSend" :label="$t('configLazyLoad.channel.mailTip66')" style="text-align: left;">
        <el-input v-model.trim="firmMailEdit.smtpHost" class="input_box"></el-input>
        <p class="tip">{{$t('configLazyLoad.channel.mailTip69')}}</p>
      </el-form-item>
      <el-form-item class="mail_name" v-show="firmMailEdit.smtpSend" :label="$t('configLazyLoad.channel.mailTip67')" style="text-align: left;">
        <el-input v-model.trim="firmMailEdit.smtpPassword" class="input_box"></el-input>
        <p class="tip">{{$t('configLazyLoad.channel.mailTip70')}}</p>
      </el-form-item>
      <el-form-item v-show="firmMailEdit.smtpSend" :label="$t('configLazyLoad.channel.mailTip73')" style="text-align: left;">
        <el-radio-group v-model.trim="firmMailEdit.sslSend">
          <el-radio :label="true">{{$t('config.agent.open')}}</el-radio>
          <el-radio :label="false">{{$t('config.agent.close')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="firmMailEdit.smtpSend" :label="$t('configLazyLoad.channel.mailTip74')" style="text-align: left;">
        <el-radio-group v-model.trim="firmMailEdit.authSend">
          <el-radio :label="true">{{$t('config.agent.open')}}</el-radio>
          <el-radio :label="false">{{$t('config.agent.close')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button class="primary_btn" @click="saveForm('firmMailEdit')" type="primary">{{$t('public.save')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {getCache, deepClone} from '@/utils/m7Utils.js'
  import questionTooltip from '@/components/ui-modules/questionToolTip/QuestionToolTip.vue'
  import breadCrumb from '../../../../ui-modules/breadCrumb/BreadCrumbConfig.vue'
  import AgentTree from '@/components/public-modules/cust-tab-content/business/agentTree.vue'
//  import * as types from '@/store/modules/config/channelConfig/channelMail/mutation-types.js'
//  import Vue from 'vue'

  function updateMailConfig (store, data) {
    return store.dispatch('updateMailConfig', data)
  }

  export default {
    name: 'FirmMailEdit',
    props: {
      editObject: Object,
      default () {
        return {}
      }
    },
    data () {
      return {
        firmMailEdit: {
          email: '',
          skillGroup: '',
          signature: '',
          num: 0, // 超时提醒时间
          beforeNum: 0, // 超时前提醒时间
          beforeUnit: 'minute', // 超时前提醒时间
          unit: 'minute', // 超时提醒时间
          isOpen: false, // 是否启用超时提醒
          seatSendEvaluation: false, // 座席发送满意度评价
          systemSendEvaluation: false, // 系统发送满意度评价
          remindUser: [],   // 提醒成员
          smtpSend: false,
          smtpHost: '',
          smtpPassword: '',
          sslSend: false,
          authSend: false
        },
        titleArr: [this.$t('configLazyLoad.channel.mailTip8'), this.$t('configLazyLoad.channel.mailTip22')],
        timeOptions: [{
          label: this.$t('public.minutes2'),
          val: 'minute'
        }, {
          label: this.$t('public.hours2'),
          val: 'hour'
        }]
      }
    },
    methods: {
      returnFun () {
        this.$emit('cancel')
      },
      changeNum () { // 数据校验
        if (parseFloat(this.firmMailEdit.num) <= 0) {
          this.$message.error(this.$t('email.emailTimeOutTip2'))
          this.firmMailEdit.num = 0
          return false
        }
        if (parseFloat(this.firmMailEdit.beforeNum) <= 0) {
          this.$message.error(this.$t('email.emailTimeOutTip3'))
          return false
        }
        if (this.firmMailEdit.beforeUnit === this.firmMailEdit.unit && parseFloat(this.firmMailEdit.num) <= parseFloat(this.firmMailEdit.beforeNum)) {
          this.$message.error(this.$t('email.emailTimeOutTip1'))
          return false
        }
        if (this.firmMailEdit.beforeUnit !== this.firmMailEdit.unit && this.firmMailEdit.beforeUnit === 'hour' && parseFloat(this.firmMailEdit.num) <= parseFloat(this.firmMailEdit.beforeNum) * 60) {
          this.$message.error(this.$t('email.emailTimeOutTip1'))
          return false
        }
        if (this.firmMailEdit.beforeUnit !== this.firmMailEdit.unit && this.firmMailEdit.unit === 'hour' && parseFloat(this.firmMailEdit.num) * 60 <= parseFloat(this.firmMailEdit.beforeNum)) {
          this.$message.error(this.$t('email.emailTimeOutTip1'))
          return false
        }
        return true
      },
      saveForm (formName) { // 保存提交表单
        let name = formName
        this.$refs[name].validate((valid) => {
          if (valid) {
            if (this.firmMailEdit.smtpSend) {
              if (!this.firmMailEdit.smtpHost) {
                this.$message.error(this.$t('configLazyLoad.channel.mailTip71'))
                return
              }
              if (!this.firmMailEdit.smtpPassword) {
                this.$message.error(this.$t('configLazyLoad.channel.mailTip72'))
                return
              }
            }
            if (!this.firmMailEdit.isOpen) { // 没有打开超时提醒
              updateMailConfig(this.$store, this.$refs[name].model).then((res) => {
                this.returnFun()
              })
              return
            } else { // 打开了超时提醒
              if (!this.changeNum()) { // 验证不通过
                return
              }
              if (!this.firmMailEdit.remindUser.length) { // 没有添加提醒人员
                this.$message.error(this.$t('configLazyLoad.channel.mailTip17'))
                return
              }
              updateMailConfig(this.$store, this.firmMailEdit).then((res) => {
                this.returnFun()
              })
            }
          } else {
            return false
          }
        })
      },
//      技能组&&签名的校验
      checkObj (obj) {
        let peerFlag = false
        this.peers.forEach((item) => {
          if (obj.skillGroup === item.Exten) {
            peerFlag = true
          }
        })
        let signFlag = false
        this.signs.forEach((itema) => {
          if (obj.sign === itema._id) {
            signFlag = true
          }
        })
        if (!peerFlag) {
          obj.skillGroup = ''
        }
        if (!signFlag) {
          obj.sign = ''
        }
        return obj
      },
      popoverShow () { // 展示添加提醒人员组建
        this.$refs.agentTree.setCheckedKeys()
      },
      saveFollowedAgents (agents) { // 保存 添加的提醒人员
        let arr = deepClone(agents)
        this.firmMailEdit.remindUser = []
        arr.forEach((item, index) => {
          this.firmMailEdit.remindUser.push({userId: item})
        })
        document.getElementsByTagName('body')[0].click()
      },
      closeFollowedAgents (agent) { // 删除添加过的提醒人
        this.firmMailEdit.remindUser = this.firmMailEdit.remindUser.filter((item) => item.userId !== agent)
      },
      initData () { // 数据的初始化
        this.firmMailEdit = this.checkObj(deepClone(this.editObject))
        if (!this.firmMailEdit.smtpSend) {
          this.$set(this.firmMailEdit, 'smtpSend', false)
        }
        if (!this.firmMailEdit.smtpHost) {
          this.$set(this.firmMailEdit, 'smtpHost', '')
        }
        if (!this.firmMailEdit.smtpPassword) {
          this.$set(this.firmMailEdit, 'smtpPassword', '')
        }
        if (!this.firmMailEdit.sslSend) {
          this.$set(this.firmMailEdit, 'sslSend', false)
        }
        if (!this.firmMailEdit.authSend) {
          this.$set(this.firmMailEdit, 'authSend', false)
        }
        if (!this.firmMailEdit.unit) {
          this.$set(this.firmMailEdit, 'unit', 'minute')
        }
        if (!this.firmMailEdit.remindUser) {
          this.$set(this.firmMailEdit, 'remindUser', [])
        }
        if (!this.firmMailEdit.num) {
          this.$set(this.firmMailEdit, 'num', 0)
        }
        if (!this.firmMailEdit.isOpen) {
          this.$set(this.firmMailEdit, 'isOpen', false)
        }
        if (!this.firmMailEdit.beforeNum) {
          this.$set(this.firmMailEdit, 'beforeNum', 0)
        }
        if (!this.firmMailEdit.beforeUnit) {
          this.$set(this.firmMailEdit, 'beforeUnit', 'minute')
        }
        if (!this.firmMailEdit.seatSendEvaluation) {
          this.$set(this.firmMailEdit, 'seatSendEvaluation', false)
        }
        if (!this.firmMailEdit.systemSendEvaluation) {
          this.$set(this.firmMailEdit, 'systemSendEvaluation', false)
        }
      }
    },
    watch: {
      quickSearchList: {
        deep: true,
        handler: function (obj, oldObj) {
          if (obj !== oldObj) {
            this.initData()
          }
        }
      }
    },
    computed: {
      peers () {
        let mailQueues = deepClone(getCache('mailQueues'))
        console.log(mailQueues)
        return mailQueues
      },
      signs () {
        let signs = deepClone(getCache('emailSign'))
        let signNew = [{ name: this.$t('public.pleasePick'), _id: '' }, ...signs]
        return signNew
      },
      folllowedAgents () { // 获取添加的提醒座席
        let agents = this.firmMailEdit.remindUser || []
        let agentsAll = this.$store.getters.agents || {}
        return agents.map((item) => {
          return {_id: item.userId, label: agentsAll[item.userId].displayName}
        })
      }
    },
    components: {
      breadCrumb,
      AgentTree,
      questionTooltip
    },
    beforeMount () {
      this.initData()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .title
    font-size 14px
    .el-icon-arrow-left
      color $c-main
      border 1px solid $c-main
      border-radius 50%
      cursor pointer
      margin 0 5px 0 15px
  .edit_mail_form
    padding 20px
  .mail_name
    width 500px
  .input_box
    width calc(100% - 60px)
  .wechatTootip
    margin-left 20px
    margin-top 3px
  .tip
    color #737373
    font-size 12px
</style>
